<template>
  <el-tabs type="border-card">
    <div class="home-page">

      <el-row :gutter="20">
        <!-- 左侧充电站容器 -->
        <el-col :span="18">
          <div class="station-container">
            <h2>充电站列表</h2>
            <el-row :gutter="20" class="station-row">
              <el-col :span="8" v-for="station in stations" :key="station.id">
                <el-card class="box-card" shadow="hover">
                  <div class="station-info">
                    <div class="station-name">📍 {{ station.stationName }}</div>
                    <div class="station-address">🏠 {{ station.address }}</div>
                    <div><el-button type="primary" @click="add">投资</el-button></div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-empty v-if="stations.length === 0" description="暂无数据" />
          </div>
        </el-col>

        <!-- 右侧示例按钮容器 -->
        <el-col :span="6">
          <div class="example-container">
            <h3>功能快捷导航</h3>
            <el-card class="example-card" @click="() => goToPage('dashboard')">
              📊 数据概览
            </el-card>
            <el-card class="example-card" @click="() => goToPage('profile')">
              👤 用户信息
            </el-card>
            <el-card class="example-card" @click="() => goToPage('settings')">
              ⚙️ 系统设置
            </el-card>
          </div>
        </el-col>
        <Investors4Add :dialog4add="dialog4add" @aclose="close"/>
      </el-row>
    </div>
  </el-tabs>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import Investors4Add from "@/components/Investors4Add.vue";
const router = useRouter();
const stations = ref([]);
const add=(()=>{
  dialog4add.value=true
})
const close=()=>{
  dialog4add.value=false
}
const  dialog4add=ref(false)
// 创建自定义 axios 实例
const apiClient8080 = axios.create({
  baseURL: 'http://localhost:8080', // 指定 8080 端口
  timeout: 5000, // 设置超时时间
});

// 获取站点数据
const fetchStations = async () => {
 axios.get('http://localhost:8080/Investors/getInvByuser')
     .then(resp=>{
       console.log(resp.data)
       stations.value=resp.data[0].zbs
     })
};

onMounted(fetchStations);

// 定义页面跳转方法
const goToPage = (pageName) => {
  router.push({ name: pageName });
};
</script>

<style scoped>
/* 页面布局样式 */
.home-page {
  padding: 20px;
}

/* 卡片样式 */
.box-card {
  margin: 10px 0;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 站点容器样式 */
.station-container h2 {
  margin-bottom: 20px;
}

/* 示例按钮容器样式 */
.example-container {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}
.example-container h3 {
  margin-bottom: 20px;
}
.example-card {
  margin: 10px 0;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.example-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 全局布局优化 */
.station-row {
  padding: 20px;
}
</style>